@(projectId: Long, form: Form[TestSuiteWizard.Step3], settings: Map[String, String], preDefinedSettings: List[String])

@import play.i18n._

@css = {
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/testsuites/wizard.min.css")" />
}

@script = {

	<script type="text/javascript">
		$(document).ready(function() {
			$('#add-setting').click(function() {
				var index = -1;
				$('#settings tr').each(function() {
					if($(this).attr('data-index') != '') {
						var dIndex = parseInt($(this).attr('data-index'), 10);
						if(!isNaN(dIndex) && dIndex > index) {
							index = dIndex;
						}
					}
				});
				index++;
				
				var row = '<tr data-index="' + index + '">' +
							'<td><input type="text" id="setting-key-' + index + '" name="setting-key-' + index + '" class="" value="" /></td>' +
							'<td><input type="text" id="setting-value-' + index + '" name="setting-value-' + index + '" class="" value="" /></td>' +
						   '</tr>';
				
				$('#settings tr:last').after(row);
				$('#setting-key-' + index).focus();
			});
		});
	</script>

}

@main(Messages.get("view.testsuites.page.wizard.add.step3.title"), css, script) {
	
	<div class="resource-form resource-form-2-column">
		@helper.form(action = routes.TestSuites.submitCreateTestSuite(projectId, 3)) { 
			
			<div class="column">
			
			<table id="settings">
				<tr>
					<th>@Messages.get("view.testsuites.wizard.add.step3.list.setting.key.column")</th>
					<th>@Messages.get("view.testsuites.wizard.add.step3.list.setting.value.column")</th>
				</tr>
				@if(settings != null ) {
					@for(((key, value), index) <- settings.zipWithIndex) {
						<tr data-index="@index">
							<td>
								<input type="text" id="setting-key-@index" name="setting-key-@index" class="" value="@key" />
							</td>
							<td>
								<input type="text" id="setting-value-@index" name="setting-value-@index" class="" value="@value" />
							</td>
						</tr>
					}
				}
			</table>
			
			<a id="add-setting" href="javascript:void(0);" title="">@Messages.get("view.testsuites.wizard.add.step3.list.setting.button.add")</a>
				
			</div>
			
			<div class="column-wide">
				<button type="submit" name="action" value="previous">&laquo; @Messages.get("view.testsuites.wizard.button.previous.label")</button>
				<button type="submit" name="action" value="next">@Messages.get("view.testsuites.wizard.button.next.label") &raquo;</button>
			</div>
			
		}
		
		<div class="clear-right"></div>
	</div>
	
}
